<template>
	<view style="text-align: center;">
		<view style="margin-top: 100px; display: flex; flex-direction: column; align-items: center;">
			<image class="circle-img" :src="iconFilePath" @click="updateImage()" mode="aspectFill"></image>
			<button @click="updateImage()">选择图片</button>
			<button @click="previewImage(choosedImages)">预览图片</button>
			<button @click="getImageInfo(choosedImages)">获取图片信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath:"/static/logo.png",
				choosedImages:[]
			}
		},
		methods: {
			updateImage(){
				uni.chooseImage({
					count:6,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success: (res) => {
						console.log("updateImage().success"+JSON.stringify(res.tempFilePaths));
						uni.previewImage({
							urls:res.tempFilePaths,
						});
						this.iconFilePath=res.tempFilePaths[0];
						this.choosedImages = res.tempFilePaths; 
					}
				});
			},
			chooseImage(){
				uni.chooseImage({
					success: (res) => {
						this.chooseImages=res.tempFilePaths;
					}
				});
			},
			previewImage(images){
				uni.previewImage({
					urls:images
				})
			},
			getImageInfo(images){
			    uni.getImageInfo({
			        src: images[0], 
			        success: (res) => {
			            console.log(res.width + "，" + res.height);
			        }
			    });
			}
		}
	}
</script>

<style>
.circle-img{
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
}
</style>
